<template>
  <div class="ztree_content_wrap" v-if="this.treeDataSource.length>0">
    <div class="zTreeDemoBackground left">
      <ul class="ztree">
        <zTreeItem v-for="(m,i) in treeDataSource" :key="i" :model.sync="m" :num.sync="i"
          root="0" :nodes.sync="treeDataSource.length" :ischeck="isCheck" :callback="func"
          :expandfunc="expand" :cxtmenufunc="contextmenu" :trees.sync="treeDataSource"
        ></zTreeItem>
      </ul>
    </div>
  </div>
</template>

<script>
import zTreeItem from '~/components/common/zTreeItem.vue';

export default {
  name: 'zTree',
  data() {
    return {
    	treeDataSource: [],
    };
  },
  components: {
    zTreeItem,
  },
  props: {
    // 树数据
    list: {
       	  	type: Array,
       	  	twoWay: true,
    },
    // 点击节点回调
    func: {
      type: Function,
      default: null,
    },
    // 点击展开回调
    expand: {
      type: Function,
      default: null,
    },
    // 右击事件
    contextmenu: {
      type: Function,
      default() {
        console.log('defalt click contextmenu');
      },
    },
    // 是否展开
    isOpen: {
      type: Boolean,
      twoWay: true,
      default: false,
    },
    // 是否选中
    isCheck: {
      type: Boolean,
      twoWay: true,
      default: false,
    },
  },

  watch: {
    list: {
      handler() {
            	// alert("哈哈");
            	// this.initTreeData();
      },
      deep: true,
    },
    checkedlist(newValue, oldValue) {
      for (const i of oldValue) {
        this.retVal.splice(this.retVal.indexOf(i), 1);
      }

      for (const i of newValue) {
        this.retVal.push(i);
      }
    },
  },
  mounted() {
    this.initTreeData();
  },
  methods: {

    initTreeData() {
      const tempList = JSON.parse(JSON.stringify(this.list));

      // 递归操作，增加删除一些属性。比如: 展开/收起
      var recurrenceFunc = (data) => {
        data.forEach((m) => {
          if (!m.hasOwnProperty('clickNode')) {
	                    m.clickNode = m.hasOwnProperty('clickNode') ? m.clickNode : false;
	                }

	                if (!m.hasOwnProperty('ckbool')) {
            m.ckbool = m.hasOwnProperty('ckbool') ? m.ckbool : false;
            m.ckbool = m.checked;
	                }

	                if (!m.hasOwnProperty('isCheck')) {
	                	 m.isCheck = m.hasOwnProperty('isCheck') ? m.isCheck : this.isCheck;
	                }

          m.children = m.children || [];

          m.hover = false;

          if (!m.hasOwnProperty('isFolder')) {
	               		m.isFolder = m.hasOwnProperty('open') ? m.open : this.isOpen;
	                }

	                if (!m.hasOwnProperty('isExpand')) {
	               		m.isExpand = m.hasOwnProperty('open') ? m.open : this.isOpen;
	               	}

	               	m.loadNode = 0;

	               	recurrenceFunc(m.children);
        });
      };

      recurrenceFunc(tempList);

      this.treeDataSource = tempList;
    },
  },
};
</script>

<style>
	div.ztree_content_wrap {height:380px; }
	div.ztree_content_wrap div.left{float: left;width: 100%;}
	div.zTreeDemoBackground {width:100%;height:500px;text-align:left;}

	.expendIcon {
		background-position: -74px -36px;
		line-height: 0;
	    margin: 0;
	    width: 16px;
	    height: 16px;
	    display: inline-block;
	    vertical-align: middle;
	    border: 0 none;
	    cursor: pointer;
	    outline: none;
	    position: absolute;
	    top:4px;
	    background-color: transparent;
	    background-repeat: no-repeat;
	    background-attachment: scroll;
	    background-image: url("/images/ztree/zTreeStandard.png");
	}

	ul.ztree {border:1px solid #ddd;background: #ffffff;width:100%;height: 100%;
    overflow: auto;}

	.ztree * {padding:0; margin:0; font-size:15px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
	.ztree {margin:0; padding:5px; color:#333 ;}
	.ztree li{position: relative; padding:0; margin:0; list-style:none; line-height:24px; text-align:left; white-space:nowrap; outline:0}
	.ztree li ul{ margin:0; padding:0 0 0 18px}
	.ztree li ul.line{ background:url('/images/ztree/line_conn.gif') 0 0 repeat-y;}

	.ztree li a {padding:1px 3px 0 5px; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
		text-decoration:none; vertical-align:top; display: inline-block}
	.ztree li a:hover {text-decoration:none;color:blue;}
	.ztree li a>span.curSelectedNode {padding-top:0px;  height:18px; opacity:0.8; padding: 3px 5px; background:#000; color:#fff;}
	.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
	.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid;
		opacity:0.8; filter:alpha(opacity=80)}
	.ztree li a.tmpTargetNode_prev {}
	.ztree li a.tmpTargetNode_next {}
	.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
		font-size:12px; border:1px #7EC4CC solid; *border:0px}
	.ztree li span {line-height:16px; margin-right:2px; top: 3px; display: inline-block;}
	.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
		border:0 none; cursor: pointer;outline:none;
		background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
		background-image:url("/images/ztree/zTreeStandard.png"); *background-image:url("/images/ztree/zTreeStandard.gif")}

	.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: pointer}
	.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
	.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
	.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
	.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
	.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px}
	.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
	.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
	.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px}
	.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
	.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px}
	.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
	.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px}
	.ztree li span.button.chk.radio_false_part {background-position:-28px -28px}
	.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px}
	.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px}
	.ztree li span.button.chk.radio_true_full {background-position:-42px 0}
	.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px}
	.ztree li span.button.chk.radio_true_part {background-position:-42px -28px}
	.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px}
	.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px}

	.ztree li span.button.switch {width:18px; height:18px}
	.ztree li span.button.root_open{background-position:-92px -54px}
	.ztree li span.button.root_close{background-position:-74px -54px}
	.ztree li span.button.roots_open{background-position:-92px 0}
	.ztree li span.button.roots_close{background-position:-74px 0}
	.ztree li span.button.center_open{background-position:-92px -18px}
	.ztree li span.button.center_close{background-position:-74px -18px}
	.ztree li span.button.bottom_open{background-position:-92px -36px}
	.ztree li span.button.bottom_close{background-position:-74px -36px}
	.ztree li span.button.noline_open{background-position:-92px -72px}
	.ztree li span.button.noline_close{background-position:-74px -72px}
	.ztree li span.button.root_docu{ background:none;}
	.ztree li span.button.roots_docu{background-position:-56px 0}
	.ztree li span.button.center_docu{background-position:-56px -18px}
	.ztree li span.button.bottom_docu{background-position:-56px -36px}
	.ztree li span.button.noline_docu{ background:none;}

	.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.add {margin:4px 2px 0 0; background-position:-143px 0px; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.remove {margin:4px 2px 0 0; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
    .ztree li span.button.up { background:url()
    }
    .ztree li span.button.down { background:url()
    }
	/*.ztree li span.button.ico_loading{margin-right:2px; background:url('/images/ztree/loading.gif') no-repeat scroll 0 0 transparent;
	            vertical-align:top; *vertical-align:middle}*/

	ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}

	span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
		background-color:white; background-repeat:no-repeat; background-attachment: scroll;
		background-position:-110px -80px; background-image:url("/images/ztree/zTreeStandard.png"); *background-image:url("/images/ztree/zTreeStandard.gif")}

	ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden;
	             background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}

	.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}

	.loadSyncNode {
		width: 16px;
        height: 16px;
        position: relative;
        display: inline-block;
		background-image:url("")
	}
</style>
